Beautiful CSS Animated Menu for Blogger --classifieds

مواضيع مفضلة

الخميس، 14 نوفمبر 2019

Beautiful CSS Animated Menu for Blogger --classifieds


Navigation menu is one of the most important part of our blog, because with this our readers can find pages they want i.e contact us, feedback us, etc And if menu is animated then reader cant wait to click on it . creating a beautiful menu is not hard in these days but make it compatible with all major is browser is one of the question on these menus

STEPS
  1. Goto blogger and select your blog in which you want to add menu
  2. Now select layout tab and add a gadget 
  3. The select html/javascript and paste below Code in it .

<style type="text/css">.exespotlightmenu{width: 100%;overflow:hidden;}.exespotlightmenu ul{margin: 0;padding: 0;font: bold 14px Verdana; /* font style and size */list-style-type: none;text-align: center; /* "left", "center", or "right" align menu */}.exespotlightmenu li{display: inline-block;position:relative;padding: 5px;margin: 0;margin-right: 5px; /* right margin between menu items */}.exespotlightmenu li a{display:inline-block;padding: 5px;min-width:50px; /* horizontal diameter of spotlight */height:50px; /* vertical diameter of spotlight */text-decoration: none;color: black;margin: 0 auto;overflow:hidden;-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}.exespotlightmenu li:hover a{color: white;background: #a71b15; /* background color of spotlight */-webkit-border-radius: 50%; /* large radius to create circular borders */-moz-border-radius: 50%;border-radius: 50%;}.exespotlightmenu li a exespan{position:relative;top:35%; /* move text down so it appears centered within menu item */}</style> 

<div class="exespotlightmenu"><ul><li><a href="##########"><exespan>Home</exespan></a></li><li><a href="##########"><exespan>About</exespan></a></li><li><a href="##########"><exespan>Portfolio</exespan></a></li><li><a href="##########"><exespan>Privacy</exespan></a></li><li><a href="##########"><exespan>Contact Us</exespan></a></li></ul></div>
Now Replace RED colour to your desire text And replace ######## with your desire link.

  • روابط التحميل والمشاهدة، الروابط المباشرة للتحميل من هنا
---------------------------------------------------------------
شاهد هذا الفيديو القصير لطريقة التحميل البسيطة من هنا
كيف تحصل على مدونة جاهزة بآلاف المواضيع والمشاركات من هنا شاهد قناة منتدى مدونات بلوجر جاهزة بألاف المواضيع والمشاركات على اليوتيوب لمزيد من الشرح من هنا رابط مدونة منتدى مدونات بلوجر جاهزة بآلاف المواضيع والمشاركات في أي وقت حــــتى لو تم حذفها من هنا شاهد صفحة منتدى مدونات بلوجر جاهزة بألاف المواضيع والمشاركات على الفيس بوك لمزيد من الشرح من هنا تعرف على ترتيب مواضيع منتدى مدونات بلوجر جاهزة بآلاف المواضيع والمشاركات (حتى لا تختلط عليك الامور) من هنا
ملاحظة هامة: كل عمليات تنزيل، رفع، وتعديل المواضيع الجاهزة تتم بطريقة آلية، ونعتذر عن اي موضوع مخالف او مخل بالحياء مرفوع بالمدونات الجاهزة بآلاف المواضيع والمشاركات، ولكم ان تقوموا بحذف هذه المواضيع والمشاركات والطريقة بسيطة وسهلة. ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــسلامـ.

إرسال تعليق

المشاركة على واتساب متوفرة فقط في الهواتف